<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="本店优惠卡列表">
        <van-cell
          v-for="item in cards"
          :key="item.id"
          :title="item.name"
          :value="item.amount + '元'"
          is-link
          :to="{ name: 'VerifyAction', params: { card_id: item.id } }"
        >
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getWxCards } from "@/api/card";

export default {
  name: "Verify",
  data() {
    return {
      title: this.$route.meta.title,

      cards: [],
      loading: false,
      finished: false,

      listQuery: {
        page: 1,
        page_size: 10,
        retailer_id: this.retailer_id,
      },
    };
  },

  props: ["retailer_id"],

  mounted() {},

  methods: {
    onLoad() {
      this.getCardList();
    },
    getCardList() {
      this.loading = true;
      this.listQuery.retailer_id = this.retailer_id;
      getWxCards(this.listQuery)
        .then((res) => {
          if (res.data.results.length == 0) {
            this.cards = [];
            this.finished = true;
          }
          this.listQuery.page = res.data.page;
          this.loading = false;
          this.cards.push(...res.data.results);
          if (this.cards.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取会员卡失败!");
        });
    },
  },
};
</script>

<style scoped>
.content {
  margin: 5px;
}
.van-cell__label {
  font-size: 14px;
}
.van-row {
  padding: 10px 5px;
}
</style>